<template>
  <section>
      <el-row :gutter="20">
        <el-col :span="8">
            <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
                <el-form-item label="原始密码" placeholder="请输入原始密码" prop="oldPassword">
                    <common-input type="password" v-model="passwordForm.oldPassword"></common-input>
                </el-form-item>
                <el-form-item label="新密码" placeholder="请输入新密码" prop="password">
                    <common-input type="password" v-model="passwordForm.password"></common-input>
                </el-form-item>
                <el-form-item label="确认新密码" placeholder="确认密码需与密码一致" prop="confirmPassword">
                    <common-input type="password" v-model="passwordForm.confirmPassword"></common-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="next()" :loading="saveLoading">确定修改</el-button>
                </el-form-item>
            </el-form>
        </el-col>
      </el-row>
  </section>
</template>

<script>
    import {
        admin_update_password
    } from '../../api/user';
    export default {
        components: {
        },
    data() {
        return {
            passwordForm: {
                oldPassword: undefined,
                password: undefined,
                confirmPassword: undefined
            },
            saveLoading: false,
            passwordRules: {
                oldPassword: [
                    {
                        required: true,
                        message: '请输入原始密码',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                    {
                        min: 5,
                        max: 20,
                        message: '长度在 5 到 20 个字符',
                        trigger: 'blur'
                    }
                ],
                confirmPassword: [
                    {
                        required: true,
                        message: '请输入确认密码',
                        trigger: 'blur'
                    },
                    {
                        min: 5,
                        max: 20,
                        message: '长度在 5 到 20 个字符',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    mounted() {
    },
    methods: {
        next() {
            const set = this.$refs;
            set["passwordForm"].validate(valid => {
                if (valid) {
                    admin_update_password(this.passwordForm).then(() => {
                        this.$message.success("密码已修改");
                        this.passwordForm = {
                            oldPassword: undefined,
                            password: undefined,
                            confirmPassword: undefined
                        }
                    });
                } else {
                    return false;
                }
            });
        }
    }
    };
</script>
